<template>
  <view
    class="picker-value"
    :class="[disabled && 'is-disabled']"
    @click="emit('click')"
    :style="{ minWidth }"
  >
    <text v-if="valueText" class="picker-value--text text-overflow-1">{{ valueText }}</text>
    <text v-else style="color: #999996">{{ !disabled ? placeholder : '' }}</text>
    <text v-if="icon" class="ali-icon" :style="iconStyle" @click.stop="emit('iconClick')">
      {{ icon }}
    </text>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import type { CSSProperties, PropType } from 'vue';

  defineProps({
    valueText: propTypes.string.def(''),
    placeholder: propTypes.string.def(''),
    icon: propTypes.string.def('\ue8f2'),
    iconStyle: {
      type: Object as PropType<CSSProperties>,
      default: () => ({
        fontSize: '30rpx',
      }),
    },
    minWidth: propTypes.number.def(300),
    disabled: propTypes.bool.def(false),
  });

  const emit = defineEmits(['click', 'iconClick']);
</script>

<style lang="scss" scoped>
  .picker-value {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 27rpx;
    font-weight: 400;
    justify-content: space-between;
    .ali-icon {
      margin-left: 20rpx;
    }
  }
</style>
